<template>
    <div class="bar">
        <div class="choose">
            <check-button class="bar-btn" @click.native='SelectAll' :is-check='isCheckAll'/>
            <span class="choose-all">全选</span>
        </div>
        <div class="price">
            合计 <span class="allPrice">{{allPrice}}</span>元
        </div>
        <div class="calculate">
            提交订单()
        </div>
    </div>
</template>
<script>
// 引入打勾组件
  import CheckButton from 'components/content/checkbutton/CheckButton'
import { mapGetters } from 'vuex'

    export default {
        name:'CartBottomBar',
        components:{
            CheckButton
        },
        computed: {
    // 将状态管理vuex的getters属性引入为组件computed属性
            ...mapGetters(["setcartList"]),
            // 总价
            allPrice(){
               return '$' + this.setcartList.filter(item=>{
                    //return item.checked //返回 checked=true的
                    console.log("setcartList");
                    return item.checked
                }).reduce((pre,item)=>{
                    return pre + item.price * item.count;
                },0);
            },
            isZero(){ //判断是否购物车没有数据
                if(this.setcartList.length == 0 ){
                    return 0
                }
            },
            // 判断是否全选
            isCheckAll(){
                if(this.setcartList.length == 0 ){return false;}
                return !this.setcartList.find((item)=>{
                        // 这里的如果是false 就会true 在到外面 就false 然后就是没有 全选
                        return !item.checked;
                        // find 高阶函数 遇到false 就结束 停止遍历
                })
            }
        },
        methods:{
            //点击全选
            SelectAll(){
                if(this.isCheckAll){ //通过了就是全选了
                    this.setcartList.forEach((item,index) => {
                        item.checked = false;//全不选
                    });
                }else{
                    this.setcartList.forEach((item,index)=>{
                        item.checked = true; //全选
                    })
                }
            }
        }
    }
</script>
<style scope>
 .bar {
    height: 40px;
    position: relative;
    display: flex;
    z-index: 115;
    background-color: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    line-height: 40px;
  }
  .bar-btn {
    display: inline-block;
    position: absolute;
    top: 10px;
    color: #fff;
    line-height: 20px;
  }
  .choose-all {
    position: absolute;
    left: 30px;
  }
  .choose {
    width: 80px;
    flex: 1;
  }
  .price {
    left: 110px;
   flex: 1;
  }
  .allPrice {
    color: var(--color-tint);
    margin: 0 3px;
  }
  .calculate {
    width: 100px;
    text-align: center;
    background-image: linear-gradient(90deg,#ff6034,#ee0a24);
    color: #fff;
  }
</style>
